<template>
  <Layout desc="以sortablejs为例,封装一个无渲染组件">
    <div>
      <div class="flex items-center gap-20 mt-20">
        <Sortable ref="containerRef" v-model="list" :animation="150">
          <template v-slot="{ instance }">
            <div
              v-for="i in list"
              :key="i.id"
              class="bg-zinc-300 w-100 rounded mb-5 p-5 text-center text-white cursor-pointer select-none"
            >
              {{ i.name }}
            </div>
            {{ console.log(instance) }}
          </template>
        </Sortable>

        <pre>{{ list }} </pre>
      </div>
      <div class="w-full text-center">
        <el-button type="primary" @click="destroy" class="w-50"
          >销毁组件</el-button
        >
      </div>
    </div>
  </Layout>
</template>
<script setup lang="ts">
import Sortable from './components/Sortable.vue'
import { ElMessage } from 'element-plus'

const list = ref([
  {
    id: 1,
    name: '张三'
  },
  {
    id: 2,
    name: '李四'
  },
  {
    id: 3,
    name: '王五'
  },
  {
    id: 4,
    name: '赵六'
  }
])

const containerRef = ref()

const destroy = () => {
  containerRef.value.destroy()
  ElMessage.success('销毁成功')
}
</script>

<style scoped lang="scss"></style>
